<template>
  <s-layout 
  navbar="inner"
  :tabbar="currentPagePath"
  :bgStyle="{ color: 'rgb(245,28,19)' }">
    <view
      class="page-bg"
      :style="[{ marginTop: '-' + Number(statusBarHeight + 88) + 'rpx' }]"
    ></view>
    <view class="list-content">
      <view class="content-header ss-flex-col ss-col-center ss-row-center">
        
        <view class="content-header-box ss-flex ss-row-center ss-m-t-10">
          <view class="countdown-box ss-flex" v-if="endTime?.ms > 0 && state.activityInfo">
            <view class="countdown-title ss-m-r-12">{{ endTime.text }}</view>
            <view class="ss-flex countdown-time">
              <view class="ss-flex countdown-h">{{ endTime.h }}</view>
              <view class="ss-m-x-4">:</view>
              <view class="countdown-num ss-flex ss-row-center">{{ endTime.m }}</view>
              <view class="ss-m-x-4">:</view>
              <view class="countdown-num ss-flex ss-row-center">{{ endTime.s }}</view>
            </view>
          </view>
          <view class="activity-ended-btn" v-if="endTime?.ms <= 0 && state.activityInfo">抢购已结束</view>
        </view>

        <!-- 修改为数字页码滑动列表 -->
        <scroll-view
          class="pagination-scroll ss-m-t-22 ss-m-b-20"
          scroll-x="true"
          :scroll-with-animation="true"
          show-scrollbar="false"
        >
          <view class="pagination-buttons">
            <button
              v-for="pageNum in state.pagination.last_page"
              :key="pageNum"
              class="page-btn"
              :class="{ 'active': pageNum === state.pagination.current_page }"
              @click="changePage(pageNum)"
            >
              {{ pageNum }}页
            </button>
          </view>
        </scroll-view>
        
      </view>
      <scroll-view
        class="scroll-box"
        :style="{ height: pageHeight + 'rpx' }"
        scroll-y="true"
        :scroll-with-animation="false"
        :enable-back-to-top="true"
      >
        <!-- 双列瀑布流布局 -->
        <view class="goods-masonry ss-flex ss-flex-wrap ss-col-top">
          <view class="goods-list-box left-box ss-w-50">
            <view v-for="item in leftGoodsList" :key="`left-${item.id}`" class="goods-item">
              <view class="goods-wrapper">
                <s-goods-column
                  class="goods-card"
                  size="md"
                  :data="item"
                  :seckillTag="true"
                  @click="onGoodsClick(item)"
                  @getHeight="onHeightChange('left', item.id, $event)"
                >
                  <template v-slot:cart>
                    <button 
                      class="ss-reset-button cart-btn"
                      :class="getButtonClass(item)"
                      @click.stop="onButtonClick(item)"
                      :disabled="isButtonDisabled(item)"
                      :key="`btn-left-${item.id}-${endTime.ms}`"
                    >
                      {{ getButtonText(item) }}
                    </button>
                  </template>
                </s-goods-column>
                <!-- 我的订单标签 -->
                <view v-if="item.is_mine === 1" class="my-order-tag">
                  <text class="tag-text">我的订单</text>
                </view>
              </view>
            </view>
          </view>
          <view class="goods-list-box right-box ss-w-50">
            <view v-for="item in rightGoodsList" :key="`right-${item.id}`" class="goods-item">
              <view class="goods-wrapper">
                <s-goods-column
                  class="goods-card"
                  size="md"
                  :data="item"
                  :seckillTag="true"
                  @click="onGoodsClick(item)"
                  @getHeight="onHeightChange('right', item.id, $event)"
                >
                  <template v-slot:cart>
                    <button 
                      class="ss-reset-button cart-btn"
                      :class="getButtonClass(item)"
                      @click.stop="onButtonClick(item)"
                      :disabled="isButtonDisabled(item)"
                      :key="`btn-right-${item.id}-${endTime.ms}`"
                    >
                      {{ getButtonText(item) }}
                    </button>
                  </template>
                </s-goods-column>
                <!-- 我的订单标签 -->
                <view v-if="item.is_mine === 1" class="my-order-tag">
                  <text class="tag-text">我的订单</text>
                </view>
              </view>
            </view>
          </view>
        </view>
        <!-- <uni-load-more
          v-if="state.pagination.total > 0"
          :status="state.loadStatus"
          :content-text="{
            contentdown: '上拉加载更多',
          }"
          @tap="loadmore"
        /> -->
      </scroll-view>
    </view>

    <!-- SKU选择弹窗 -->
    <s-select-seckill-sku
      v-if="state.selectedGoods"
      v-model="state.selectedGoods"
      :show="state.showSelectSku"
      @buy="onSkuConfirm"
      @close="state.showSelectSku = false"
    />

    <!-- 下单确认弹框 -->
    <su-popup :show="state.showOrderConfirm" round="10" @close="closeOrderConfirm">
      <view class="order-confirm-modal bg-white ss-flex-col">
        <!-- 弹框头部 -->
        <view class="modal-header ss-flex ss-row-between ss-col-center ss-p-x-30 ss-p-y-30">
          <view class="header-title">确认订单</view>
          <text class="cicon-close" @tap="closeOrderConfirm"></text>
        </view>

        <!-- 商品信息 -->
        <view class="goods-info ss-p-x-30" v-if="state.selectedGoods">
          <view class="ss-flex ss-col-center">
            <image
              class="goods-image"
              :src="sheep.$url.cdn(state.currentSkuInfo?.image || state.selectedGoods.image)"
              mode="aspectFill"
            />
            <view class="goods-content ss-flex-1 ss-m-l-20">
              <view class="goods-title ss-line-2">{{ state.selectedGoods.title }}</view>
              <view class="goods-sku ss-m-t-10" v-if="state.currentSkuInfo?.goods_sku_text">
                {{ state.currentSkuInfo.goods_sku_text }}
              </view>
              <view class="price-info ss-flex ss-col-center ss-row-between ss-m-t-20">
                <view class="price ss-flex ss-col-center">
                  <text class="price-symbol">￥</text>
                  <text class="price-value">{{ state.currentSkuInfo?.price || state.selectedGoods.price[0] }}</text>
                  <view class="seckill-tag">秒杀价</view>
                </view>
                <view class="stock-info">库存{{ state.currentSkuInfo?.stock || state.selectedGoods.stock }}件</view>
              </view>
            </view>
          </view>
        </view>

        <!-- 购买数量 -->
        <view class="quantity-section ss-p-x-30 ss-p-y-20">
          <view class="ss-flex ss-row-between ss-col-center">
            <view class="quantity-label">购买数量</view>
            <su-number-box
              :min="1"
              :max="state.currentSkuInfo?.stock || 1"
              :step="1"
              v-model="state.orderQuantity"
              @change="onQuantityChange($event)"
            />
          </view>
        </view>

        <!-- 倒计时信息 -->
        <view class="countdown-section ss-p-x-30 ss-p-y-20" v-if="endTime.ms > 0">
          <view class="ss-flex ss-col-center ss-row-center">
            <view class="countdown-label">{{ endTime.text }}</view>
            <view class="countdown-time ss-flex ss-col-center ss-m-l-10">
              <view class="time-item">{{ endTime.h }}</view>
              <text class="time-colon">:</text>
              <view class="time-item">{{ endTime.m }}</view>
              <text class="time-colon">:</text>
              <view class="time-item">{{ endTime.s }}</view>
            </view>
          </view>
        </view>

        <!-- 底部按钮 -->
        <view class="modal-footer ss-p-30">
          <button 
            class="confirm-btn ss-reset-button" 
            @tap="confirmOrder"
            :disabled="state.creating"
            :class="{ 'loading': state.creating }"
          >
            <text v-if="state.creating">下单中...</text>
            <text v-else>立即秒杀</text>
          </button>
        </view>
      </view>
    </su-popup>
  </s-layout>
</template>
<script setup>
  // 修复nextTick导入问题，从vue包中导入
  import { reactive, computed, ref, nextTick } from 'vue';
  import { onLoad, onReachBottom, onShow, onPullDownRefresh } from '@dcloudio/uni-app';
  import sheep from '@/sheep';
  import _ from 'lodash';
  import { useDurationTime } from '@/sheep/hooks/useGoods';
  import { showAuthModal } from '@/sheep/hooks/useModal';

  const { screenHeight, safeAreaInsets, screenWidth, safeArea } = sheep.$platform.device;
  const sys_navBar = sheep.$platform.navbar;
  const statusBarHeight = sheep.$platform.device.statusBarHeight * 2;
  const pageHeight = 
    (safeArea.height + safeAreaInsets.bottom) * 2 + statusBarHeight - sys_navBar - 350;
  const headerBg = sheep.$url.css('/static/seckill-header.png');//sheep.$url.css('/assets/addons/shopro/uniapp/goods/seckill-header.png');

  const state = reactive({
    activityId: 0,
    pagination: {
      data: [],
      current_page: 1,
      total: 1,
      last_page: 1,
    },
    loadStatus: '',
    activityInfo: {},
    showSelectSku: false,
    selectedGoods: null,
    showOrderConfirm: false,
    currentSkuInfo: null,
    orderQuantity: 1,
    creating: false, // 下单中状态
  });
  
  const activityId = ref('');
  const isLogin = computed(() => sheep.$store('user').isLogin);

  // 动态计算当前页面路径
  const currentPagePath = computed(() => {
    // 只有在显示底部导航且有活动ID时才返回路径
    if (activityId.value) {
      const fullPath = `/pages/activity/seckill/list?id=${activityId.value}`;
      
      // 检查底部导航配置中是否有匹配的项
      const tabbar = sheep.$store('app').template?.basic?.tabbar;
      if (tabbar?.list) {
        // 查找匹配的导航项
        const matchedItem = tabbar.list.find(item => {
          // 检查是否完全匹配（包含参数）
          if (item.url === fullPath) return true;
          
          // 检查基础路径是否匹配
          const itemBasePath = item.url.split('?')[0];
          const currentBasePath = fullPath.split('?')[0];
          if (itemBasePath === currentBasePath) return true;
          
          // 检查是否是带有相同ID参数的页面
          if (item.url.startsWith(`/pages/activity/seckill/list?id=${activityId.value}`)) return true;
          
          return false;
        });
        
        // 如果找到匹配项，返回基础路径用于激活
        if (matchedItem) {
          return fullPath.split('?')[0]; // 返回不含查询参数的基础路径
        }
      }
      
      return fullPath;
    }
    
    return '';
  });

  // 瀑布流相关数据
  const leftGoodsList = ref([]);
  const rightGoodsList = ref([]);
  const leftHeight = ref(0);
  const rightHeight = ref(0);
  const goodsHeightMap = ref({}); // 存储每个商品的高度

  // 处理商品高度变化，更新瀑布流布局
  function onHeightChange(column, goodsId, height) {
    goodsHeightMap.value[`${column}-${goodsId}`] = height;
    
    // 更新列高度
    if (column === 'left') {
      leftHeight.value = Object.values(goodsHeightMap.value)
        .filter((_, index) => Object.keys(goodsHeightMap.value)[index].startsWith('left'))
        .reduce((sum, h) => sum + h, 0);
    } else {
      rightHeight.value = Object.values(goodsHeightMap.value)
        .filter((_, index) => Object.keys(goodsHeightMap.value)[index].startsWith('right'))
        .reduce((sum, h) => sum + h, 0);
    }
  }

  // 将商品分配到左右列表
  function distributeGoodsToColumns(goodsList) {
    goodsList.forEach(item => {
      if (leftHeight.value <= rightHeight.value) {
        leftGoodsList.value.push(item);
      } else {
        rightGoodsList.value.push(item);
      }
      // 模拟初始高度，实际高度将通过onHeightChange更新
      if (leftHeight.value <= rightHeight.value) {
        leftHeight.value += 500; // 假设一个初始高度
      } else {
        rightHeight.value += 500; // 假设一个初始高度
      }
    });
  }

  // 判断商品状态
  function getGoodsStatus(item) {
    // 检查库存
    if (item.stock === 0) {
      return 'sold_out';
    }
    
    // 检查活动状态 - 使用全局活动信息和实时倒计时判断
    if (state.activityInfo) {
      // 基于endTime计算属性的状态判断，这样能实时更新
      if (endTime.value.ms > 0) {
        if (endTime.value.text === '距开始') {
          return 'warming_up'; // 预热中
        } else if (endTime.value.text === '距结束') {
          return 'normal'; // 正常可抢购
        }
      } else {
        return 'ended'; // 已结束
      }
    }
    
    // 如果没有活动信息，检查商品自身的活动状态
    if (item.activity) {
      if (item.activity.status === 'before') {
        return 'warming_up';
      } else if (item.activity.status === 'ing') {
        return 'normal';
      } else if (item.activity.status === 'end') {
        return 'ended';
      }
    }
    
    return 'normal';
  }

  // 获取按钮文本
  function getButtonText(item) {
    const status = getGoodsStatus(item);
    switch (status) {
      case 'warming_up':
        return '预热中';
      case 'sold_out':
        return '已售罄';
      case 'ended':
        return '已结束';
      case 'normal':
      default:
        return '立即秒杀';
    }
  }

  // 获取按钮样式类
  function getButtonClass(item) {
    const status = getGoodsStatus(item);
    switch (status) {
      case 'warming_up':
        return 'warming-btn';
      case 'sold_out':
        return 'sold-out-btn';
      case 'ended':
        return 'ended-btn';
      case 'normal':
      default:
        return '';
    }
  }

  // 判断按钮是否禁用
  function isButtonDisabled(item) {
    const status = getGoodsStatus(item);
    return status !== 'normal';
  }

  // 商品卡片点击事件
  function onGoodsClick(item) {
    const status = getGoodsStatus(item);
    if (status === 'normal') {
      // 正常状态，显示下单弹框
      onButtonClick(item);
    } else {
      // 其他状态，显示提示信息
      if (status === 'warming_up') {
        sheep.$helper.toast('活动尚未开始');
      } else if (status === 'sold_out') {
        sheep.$helper.toast('商品已售罄');
      } else if (status === 'ended') {
        sheep.$helper.toast('活动已结束');
      }
    }
  }

  // 按钮点击事件
  async function onButtonClick(item) {
    // 检查登录状态
    if (!isLogin.value) {
      showAuthModal('accountLogin');
      return;
    }
    
    const status = getGoodsStatus(item);
    
    if (status !== 'normal') {
      // 非正常状态，给出提示
      if (status === 'warming_up') {
        sheep.$helper.toast('活动尚未开始');
      } else if (status === 'sold_out') {
        sheep.$helper.toast('商品已售罄');
      } else if (status === 'ended') {
        sheep.$helper.toast('活动已结束');
      }
      return;
    }

    // 正常状态，显示下单确认弹框
    // 首先获取完整的商品信息（包含SKU信息）
    try {
      const { code, data } = await sheep.$api.goods.detail(item.id, {
        activity_id: state.activityId,
      });
      
      if (code === 1) {
        const fullGoodsInfo = data;
        state.selectedGoods = fullGoodsInfo;
        
        // 如果商品有多个SKU，显示SKU选择弹窗
        if (fullGoodsInfo.is_sku && fullGoodsInfo.skus && fullGoodsInfo.skus.length > 0) {
          state.showSelectSku = true;
        } else {
          // 单SKU商品，显示下单确认弹框
          state.showOrderConfirm = true;
          // 设置默认SKU信息
          state.currentSkuInfo = fullGoodsInfo.sku_prices && fullGoodsInfo.sku_prices[0] ? {
            ...fullGoodsInfo.sku_prices[0],
            goods_num: 1
          } : null;
        }
      } else {
        sheep.$helper.toast('获取商品信息失败');
      }
    } catch (error) {
      console.error('获取商品详情失败:', error);
      sheep.$helper.toast('获取商品信息失败');
    }
  }



  // SKU选择确认
  function onSkuConfirm(skuInfo) {
    if (state.selectedGoods) {
      // 关闭SKU选择弹窗，显示下单确认弹框
      state.showSelectSku = false;
      state.currentSkuInfo = skuInfo;
      state.orderQuantity = skuInfo.goods_num;
      state.showOrderConfirm = true;
    }
  }

  // 确认下单
  async function confirmOrder() {
    if (!state.selectedGoods || !state.currentSkuInfo) {
      sheep.$helper.toast('商品信息错误');
      return;
    }

    if (state.creating) {
      return; // 防止重复提交
    }

    state.creating = true;

    try {
      // 构建订单数据
      const orderData = {
        order_type: 'goods',
        buy_type: 'seckill',
        activity_id: state.activityId,
        goods_list: [
          {
            goods_id: state.selectedGoods.id,
            goods_num: state.currentSkuInfo.goods_num,
            goods_sku_price_id: state.currentSkuInfo.id,
          },
        ],
      };

      console.log('创建订单数据:', orderData);

      // 调用创建订单API
      const { code, data, msg } = await sheep.$api.order.create(orderData);

      if (code === 1) {
        // 订单创建成功
        sheep.$helper.toast('下单成功');
        
        // 关闭弹框
        state.showOrderConfirm = false;
        state.selectedGoods = null;
        state.currentSkuInfo = null;

        // 跳转到支付页面(客户要求暂时不支付)
        // setTimeout(() => {
        //   sheep.$router.go('/pages/pay/index', {
        //     orderSN: data.order_sn,
        //   });
        // }, 500);

        //由于客户要求暂时不支付，所以需要刷新当前页面
        getList(state.activityId, state.pagination.current_page);
      } else {
        // 订单创建失败
        sheep.$helper.toast(msg || '下单失败，请重试');
      }
    } catch (error) {
      console.error('创建订单失败:', error);
      sheep.$helper.toast('下单失败，请重试');
    } finally {
      state.creating = false;
    }
  }

  // 修改购买数量
  function onQuantityChange(quantity) {
    state.orderQuantity = quantity;
    if (state.currentSkuInfo) {
      state.currentSkuInfo.goods_num = quantity;
    }
  }

  // 关闭下单确认弹框
  function closeOrderConfirm() {
    state.showOrderConfirm = false;
    state.selectedGoods = null;
    state.currentSkuInfo = null;
    state.orderQuantity = 1;
    state.creating = false;
  }

  // 修改 getList 函数，确保每页只显示当前页数据
  async function getList(activityId, page = 1, list_rows = 20) {  // 调整为合适的每页数量
  state.loadStatus = 'loading';
  const res = await sheep.$api.goods.activityList({
    list_rows,
    activity_id: activityId,
    page,
  });
  if (res.code === 1) {
    // 无论是否为第一页，都重置列表，只显示当前页数据
    leftGoodsList.value = [];
    rightGoodsList.value = [];
    leftHeight.value = 0;
    rightHeight.value = 0;
    goodsHeightMap.value = {};
    
    // 分配商品到左右列表
    distributeGoodsToColumns(res.data.data);
    
    // 直接设置当前页数据，不再累加
    state.pagination = {
      ...res.data,
      data: res.data.data,
    };
    
    if (state.pagination.current_page < state.pagination.last_page) {
      state.loadStatus = 'more';
    } else {
      state.loadStatus = 'noMore';
    }
  }
}

// 确保分页按钮正确显示和工作
// ... 分页按钮的HTML部分保持不变 ...

// 分页切换函数
function changePage(page) {
  if (page >= 1 && page <= state.pagination.last_page) {
    getList(state.activityId, page);
    // 更新最后刷新时间
    lastRefreshTime = Date.now();
  }
}

  async function getActivity(id) {}
  
  // 删除加载更多和上拉加载相关函数
  
  // 记录是否已经初始化和最后刷新时间
  let isInitialized = false;
  let lastRefreshTime = 0;

  onLoad(async (options) => {
    if (!options.id) {
      state.activityInfo = null;
      return;
    }
    
    // 设置活动ID用于动态导航
    state.activityId = options.id;
    activityId.value = options.id;
    
    // 先获取活动信息，确保state.activityInfo有值
    const { code, data } = await sheep.$api.activity.activity(options.id);
    console.log("code", code);
    console.log("activityInfo", data);
    
    if (code === 1) {
      state.activityInfo = data;
      
      // 活动信息加载成功后，再加载商品列表
      getList(state.activityId);
      isInitialized = true;
      lastRefreshTime = Date.now();
    } else {
      state.activityInfo = null;
    }
  });

  // 页面显示时刷新数据
  onShow(() => {
    // 未登录时直接显示登录弹框
    if (!isLogin.value) {
      showAuthModal('accountLogin');
      return;
    }
    
    // 只有在已经初始化且有活动ID的情况下才刷新
    if (isInitialized && state.activityId) {
      const now = Date.now();
      // 防抖：距离上次刷新超过1秒才进行刷新
      if (now - lastRefreshTime > 1000) {
        console.log('页面显示，刷新数据');
        // 刷新当前页数据
        getList(state.activityId, state.pagination.current_page);
        lastRefreshTime = now;
      }
    }
  });

  // 下拉刷新
  onPullDownRefresh(() => {
    // 未登录时显示登录弹框，已登录时刷新数据
    if (!isLogin.value) {
      showAuthModal('accountLogin');
    } else if (isInitialized && state.activityId) {
      console.log('下拉刷新数据');
      // 刷新当前页数据
      getList(state.activityId, state.pagination.current_page);
    }
    
    // 停止下拉刷新动画
    setTimeout(() => {
      uni.stopPullDownRefresh();
    }, 800);
  });
  
  // 优化endTime计算属性，添加更健壮的存在性检查
  const endTime = computed(() => {
    // 确保state.activityInfo存在
    if (!state.activityInfo) {
      return { ms: 0 };
    }
    
    // 检查start_time是否存在且有效
    if (state.activityInfo.start_time) {
      const startDuration = useDurationTime(state.activityInfo.start_time);
      if (startDuration.ms > 0) {
        return {
          ...startDuration,
          text: '距开始',
        };
      }
    }
    
    // 检查end_time是否存在且有效
    if (state.activityInfo.end_time) {
      const endDuration = useDurationTime(state.activityInfo.end_time);
      if (endDuration.ms > 0) {
        return {
          ...endDuration,
          text: '距结束',
        };
      }
    }
    
    // 如果都不满足，返回默认值
    return { ms: 0 };
  });
</script>
<style lang="scss" scoped>
  .page-bg {
    width: 100%;
    height: 458rpx;
    background: url('@/static/seckill-header.png');//v-bind(headerBg) no-repeat;

    background-size: 100% 100%;
  }
  .list-content {
    position: relative;
    z-index: 3;
    margin: -190rpx 20rpx 0 20rpx;
    background: #fff;
    border-radius: 20rpx 20rpx 0 0;
    
    .content-header {
      width: 100%;
      border-radius: 20rpx 20rpx 0 0;
      height: 180rpx;
      background: linear-gradient(180deg, #fff4f7, #ffe6ec);
      
      .content-header-title {
        width: 100%;
        font-size: 30rpx;
        font-weight: 500;
        color: #ff2923;
        line-height: 30rpx;
        position: relative;
      }
      
      .content-header-box {
        width: 678rpx;
        height: 64rpx;
        background: rgba($color: #fff, $alpha: 0.66);
        border-radius: 32px;
        
        .countdown-title {
          font-size: 28rpx;
          font-weight: 500;
          color: #333333;
          line-height: 28rpx;
        }

        .countdown-time {
          font-size: 28rpx;
          color: rgba(#ed3c30, 0.83);
          
          .countdown-h {
            font-size: 24rpx;
            font-family: OPPOSANS;
            font-weight: 500;
            color: #ffffff;
            padding: 0 4rpx;
            height: 40rpx;
            background: rgba(#ed3c30, 0.83);
            border-radius: 6rpx;
          }
          
          .countdown-num {
            font-size: 24rpx;
            font-family: OPPOSANS;
            font-weight: 500;
            color: #ffffff;
            width: 40rpx;
            height: 40rpx;
            background: rgba(#ed3c30, 0.83);
            border-radius: 6rpx;
          }
        }
      }
    }
    
    .scroll-box {
      height: 900rpx;
      
      // 瀑布流样式修复
      .goods-masonry {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        align-content: flex-start;
        
        .goods-list-box {
          width: 50%;
          padding: 10rpx;
          box-sizing: border-box;
          
          .goods-item {
            margin-bottom: 20rpx;
            width: 100%;
          }
        }
        
        // 移除左右列单独的内边距设置，使用统一的样式
        .left-box,
        .right-box {
          // 统一使用上面的 .goods-list-box 样式
          box-sizing: border-box;
        }
        
        .goods-wrapper {
          position: relative;
          width: 100%;
          
          .goods-card {
            width: 100%;
            box-sizing: border-box;
            
            .cart-btn {
              position: absolute;
              bottom: 10rpx;
              right: 0;//20rpx;
              z-index: 11;
              height: 50rpx;
              line-height: 50rpx;
              padding: 0 20rpx;
              border-radius: 25rpx;
              font-size: 24rpx;
              color: #fff;
              background: linear-gradient(90deg, #ff6600 0%, #fe832a 100%);

              &.warming-btn {
                background: #999999;
                color: #ffffff;
              }

              &.sold-out-btn {
                background: #cccccc;
                color: #666666;
              }

              &.ended-btn {
                background: #999999;
                color: #ffffff;
              }

              &:disabled {
                opacity: 0.7;
              }
            }
          }
          
          .my-order-tag {
            position: absolute;
            top: 8rpx;
            right: 8rpx;
            z-index: 12;
            background: #ff3030;
            border-radius: 8rpx;
            padding: 4rpx 8rpx;
            
            .tag-text {
              font-size: 20rpx;
              color: #ffffff;
              font-weight: 500;
              line-height: 1.2;
            }
          }
        }
      }
    }
  }
  
  // 分页按钮样式
  .pagination-buttons {
    display: flex;
    align-items: center;
  }
  
  .page-btn {
    font-size: 26rpx;
    padding: 0 20rpx;
    height: 50rpx;
    line-height: 50rpx;
    background: #ff2923;
    color: white;
    border-radius: 25rpx;
    border: none;
  }
  
  .page-btn[disabled] {
    background: #cccccc;
    color: #666666;
  }
  
  .page-info {
    font-size: 28rpx;
    color: #333333;
    font-weight: 500;
  }

  // 修改分页按钮样式
  .pagination-scroll {
    width: 678rpx;
    height: 64rpx;
    // background: rgba($color: #fff, $alpha: 0.66);
    border-radius: 32px;
    white-space: nowrap;
    padding: 0 10rpx;
  }
  
  .pagination-buttons {
    display: inline-flex;
    align-items: center;
    height: 100%;
    padding: 6rpx 0;
  }
  
  .page-btn {
    font-size: 26rpx;
    padding: 0 24rpx;
    height: 52rpx;
    line-height: 52rpx;
    background: #ffffff;
    color: #333333;
    border-radius: 26rpx;
    border: none;
    margin: 0 8rpx;
  }
  
  .page-btn.active {
    background: #ff2923;
    color: white;
  }
  
  // 移除不需要的样式
  .page-info {
    display: none;
  }

  // 活动已结束按钮样式
  .activity-ended-btn {
    display: inline-block;
    padding: 12rpx 24rpx;
    background: #999999;
    color: #ffffff;
    border-radius: 8rpx;
    font-size: 28rpx;
    font-weight: 500;
    text-align: center;
    line-height: 1.2;
    border: none;
    cursor: default;
    user-select: none;
  }

  // 下单确认弹框样式
  .order-confirm-modal {
    border-radius: 30rpx 30rpx 0 0;
    max-height: 80vh;
    min-height: 600rpx;

    .modal-header {
      border-bottom: 1rpx solid #f5f5f5;

      .header-title {
        font-size: 32rpx;
        font-weight: 500;
        color: #333;
      }

      .cicon-close {
        font-size: 40rpx;
        color: #999;
      }
    }

    .goods-info {
      border-bottom: 1rpx solid #f5f5f5;

      .goods-image {
        width: 120rpx;
        height: 120rpx;
        border-radius: 10rpx;
        background: #f5f5f5;
      }

      .goods-content {
        .goods-title {
          font-size: 28rpx;
          color: #333;
          font-weight: 500;
          line-height: 1.4;
        }

        .goods-sku {
          font-size: 24rpx;
          color: #666;
          background: #f5f5f5;
          padding: 4rpx 8rpx;
          border-radius: 4rpx;
          display: inline-block;
        }

        .price-info {
          .price {
            .price-symbol {
              font-size: 24rpx;
              color: #ff3000;
            }

            .price-value {
              font-size: 32rpx;
              color: #ff3000;
              font-weight: 500;
              font-family: OPPOSANS;
            }

            .seckill-tag {
              margin-left: 10rpx;
              background: #ff3000;
              color: #fff;
              font-size: 20rpx;
              padding: 4rpx 8rpx;
              border-radius: 4rpx;
            }
          }

          .stock-info {
            font-size: 24rpx;
            color: #999;
          }
        }
      }
    }

    .quantity-section {
      border-bottom: 1rpx solid #f5f5f5;

      .quantity-label {
        font-size: 28rpx;
        color: #333;
        font-weight: 500;
      }
    }

    .countdown-section {
      background: linear-gradient(135deg, #fff4f4, #ffe6e6);
      border-bottom: 1rpx solid #f5f5f5;

      .countdown-label {
        font-size: 26rpx;
        color: #ff3000;
        font-weight: 500;
      }

      .countdown-time {
        .time-item {
          background: #ff3000;
          color: #fff;
          font-size: 22rpx;
          font-weight: 500;
          padding: 6rpx 8rpx;
          border-radius: 4rpx;
          min-width: 40rpx;
          text-align: center;
          font-family: OPPOSANS;
        }

        .time-colon {
          font-size: 22rpx;
          color: #ff3000;
          margin: 0 6rpx;
          font-weight: 500;
        }
      }
    }

    .modal-footer {
      .confirm-btn {
        width: 100%;
        height: 80rpx;
        background: linear-gradient(90deg, #ff5854, #ff2621);
        border-radius: 40rpx;
        color: #fff;
        font-size: 30rpx;
        font-weight: 500;
        line-height: 80rpx;
        transition: opacity 0.3s ease;

        &.loading {
          opacity: 0.7;
          background: linear-gradient(90deg, #ffb3b1, #ff9996);
        }

        &:disabled {
          opacity: 0.7;
        }
      }
    }
  }
</style>
